<template>
  <div class="jump-world">
    <div id="score">得分：{{ score_sum }}</div>
    <div id="fail" v-if="failFlag">
      <div class="gameover">
        <div>
          本次得分：
          <span class="sum">{{ score_sum }}</span>
        </div>
        <div class="reopen">
          <div @click="reopen">在玩一局</div>
        </div>
      </div>
    </div>
    <canvas id="jump-world-canvas"></canvas>
  </div>
</template>

<script>
import JumpGameWorld from './index'
import bus from '../bus'

export default {
  data () {
    return {
      score_sum: 0,
      failFlag: false
    }
  },
  mounted () {
    const game = new JumpGameWorld({
      container: document.querySelector('.jump-world'),
      canvas: document.querySelector('#jump-world-canvas'),
      axesHelper: true
    })
    bus.$on('fail', () => {
      this.failFlag = true
    })
    bus.$on('add', () => {
      this.score_sum++
    })
  },

  methods: {
    reopen () {
      window.location.reload()
    }
  }
}
</script>

<style lang="less" scoped>
@media (max-width: 768px) {
  .jump-world {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;

    canvas {
      width: 100%;
      height: 100%;
    }
  }
}

@media (min-width: 768px) {
  .jump-world {
    width: 375px;
    height: 667px;
    margin: auto;

    canvas {
      width: 100%;
      height: 100%;
    }
  }
}

#score {
  font-size: 40px;
  color: #333;
  position: absolute;
  top: 10%;
  left: 10%;
}

#fail {
  position: absolute;
  height: 100vh;
  width: 100%;

  .gameover {
    font-size: 28px;
    color: #fff;
    background: rgba(0, 0, 0, 0.5);
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    user-select: none;

    .sum {
      font-size: 40px;
      color: #fff;
      font-weight: 900;
    }

    .reopen {
      width: 100%;
      display: flex;
      justify-content: center;

      div {
        width: 200px;
        height: 50px;
        line-height: 50px;
        border-radius: 20px;
        background: rgba(210, 210, 210, 0.8);
        font-size: 30px;
        margin-top: 20px;
        color: #000;
      }
    }
  }
}
</style>